<template>
	<view>
		<Tips/> 
		<view class="create_dormitory_box">
			<view class="form">
				<view class="content">
					<MyInput :borderColor="primary_cool_color" label="宿舍名" v-model="formData.dormitory_name" placeholder="1-20个字"/>
				</view>
				<view class="title">
					宿舍类型
				</view>
				<view class="dormitory_type">
					<view 
						:class="['icon',{'checked_type' :item.id === formData.type}]"
						:style="{backgroundColor:item.bgc,color:item.color}"
						v-for="item in dormitoryTypes"
						:key="item.id"
						@click="chooseTypeFun(item)">
						<MyIcons size="30px" :src="joinSystemPath(item.iconName)"/>
						{{item.name}}
					</view>
				</view>
				<MyButton :clickFun="submitCreateDormitoryFun">立即创建</MyButton>
				<AdBanner width="100%" margin="60rpx 0rpx 0rpx 0rpx"/>
			</view>
			<!-- <view class="footer">
				<view class="info">
					违法违规立封号
				</view>
				<view class="info">
					社群文明共遵守
				</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	
	import {useDormitoryType} from '@/hooks/useDormitoryType.js' 
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	import {DormitoryTypeEnum} from '@/enum/GlobalEnum.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	import MyInput from '@/components/MyInput/MyInput.vue'
	import Tips from '@/components/Tips/Tips.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	
	import {DormitoryModel} from '@/service/model/dormitory.js'
	
	import {
		verifyIsLogin,
		verifyFormData
		} from '@/hooks/verify.js'
	
	const dynamicStyle_store=dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		dormitory_type_student_bgc,
		dormitory_type_family_bgc,
		dormitory_type_shared,
		primary_quiet_color,
		primary_text_color,
		tip_text_color,
		primary_cool_color
	} = dynamicStyle_store.globalStyle
	
	const {dormitoryTypes}=useDormitoryType()
	
	const formData=ref({
		dormitory_name:'',
		type:DormitoryTypeEnum.STUDENT,
		descript:'宿舍描述'
	})
	
	const formDataSchema={
		dormitory_name:{
			required:true,
			tip:'宿舍名'
		}
	}
	
	//选择类型
	const chooseTypeFun=(item)=>{
		formData.value.type = item.id
	}
	
	//提交创建宿舍
	const submitCreateDormitoryFun=async ()=>{
		verifyIsLogin()
		verifyFormData(formData.value,formDataSchema)
		
		const {data,success} = await dormitoryModel.postCreateDormitory(formData.value)
		
		if(success){
			uni.reLaunch({
				url:`/pages/Dormitorys/Dormitorys`,
				success:()=>uni.$emit('tips',data,'success')
			})
		}
	}
</script>

<style lang="less">
	.create_dormitory_box{
		height: 90vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 20rpx;
		.content{
			padding: 5vh 0;
		}
		.title{
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
			color: v-bind(primary_text_color);
		}
		.dormitory_type{
			display: grid;
			grid-template-columns: repeat(2,1fr);
			justify-items: center;
			gap:20rpx;
			margin-bottom: 40rpx;
			height: 160rpx;
			.checked_type{
				width: 146rpx !important;
				height: 146rpx !important;
				border:4rpx solid v-bind(primary_quiet_color);
			}
			.icon{
				width: 140rpx;
				height: 140rpx;
				border-radius:50%;
				flex-shrink:0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0 20rpx;
				transition: all .3s;
			}
		}
		.footer{
			display: flex;
			flex-direction: column;
			align-items: center;
			color:v-bind(tip_text_color);
			font-size: 20rpx;
		}
	}
</style>
